<template>
  <div class="home-page">
    <!-- 走马灯部分 -->
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(image, index) in imageList" :key="index">
        <img :src="image.src" :alt="image.alt" style="width: 100%; height: 100%; object-fit: cover;">
      </el-carousel-item>
    </el-carousel>
    <!-- 页面主体部分 -->
    <el-container>
      <el-main>
        <el-row :gutter="10">
          <!-- 左侧介绍部分 -->
          <el-col :span="8">
            <el-card class="card" shadow="hover">
              <div class="card-body">
                <div class="card-icon">
                  <i class="el-icon-info"></i>
                </div>
                <h3>关于我们</h3>
                <p>我们致力于为每一个求职者提供优质的岗位信息和便捷的招聘服务。</p>
              </div>
            </el-card>
          </el-col>

          <!-- 右侧服务介绍部分 -->
          <el-col :span="16">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-card class="card" shadow="hover">
                  <div class="card-body">
                    <div class="card-icon">
                      <i class="el-icon-search"></i>
                    </div>
                    <h3>岗位推荐</h3>
                    <p>快速浏览当前热门岗位，找到合适的职位。</p>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="card" shadow="hover">
                  <div class="card-body">
                    <div class="card-icon">
                      <i class="el-icon-edit-outline"></i>
                    </div>
                    <h3>简历优化</h3>
                    <p>提供专业的简历优化服务，让你脱颖而出。</p>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="card" shadow="hover">
                  <div class="card-body">
                    <div class="card-icon">
                      <i class="el-icon-notebook-2"></i>
                    </div>
                    <h3>学习资源</h3>
                    <p>提供丰富的学习资源，提升个人技能。</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 最近更新的招聘岗位 -->


        <el-divider></el-divider>

        <h2 style="text-align: center; margin-bottom: 20px;">最近更新的招聘岗位</h2>
        <el-row :gutter="10" style="width: 1200px; margin: 0 auto;">
          <el-col v-for="job in jobs" :key="job.id" :span="8">
            <router-link to="/jobs">
              <job-card :job-data="job"></job-card>
            </router-link>
          </el-col>
        </el-row>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import JobCard from "@/components/job/jobCard.vue";

export default {
  components: { JobCard },
  data() {
    return {
      imageList: [
        { src: require("@/assets/images/horse/pic1.png"), alt: 'Image 1' },
        { src: require("@/assets/images/horse/pic2.png"), alt: 'Image 1' },
        { src: require("@/assets/images/horse/pic3.png"), alt: 'Image 1' },
      ],
      jobs: [],
      companies: []
    };
  },
  mounted() {
    axios.get(` http://localhost:8080/company/getAllCompany`).then(res => {
      console.log('我home在向后端请求公司' , res.data)
      this.companies = res.data;
      console.log('this.companies = ' , this.companies)

      axios.get("/api/jobs")
          .then(response => {
            this.jobs = response.data.data;



            // 遍历 jobs 数组，为每个 job 添加 company_name 属性
            this.jobs.forEach(job => {

              if(job.companyId - 1 >= 0 && job.companyId - 1 < this.companies.length) {
                job.company_name = this.companies[job.companyId - 1].name;
              }else  {
                job.company_name = "未知公司";
              }
            });
          })
          .catch(error => {
            console.error("请求错误:", error);
          });

    }).catch(error => {
      console.error(error);
    })
  },
  methods: {
  }
};
</script>

<style scoped>
.card{
  background-color: #e6f7ff;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.card-body {
  text-align: center;
  padding: 20px;
}
.card-icon {
  font-size: 30px;
  color: #409EFF;
  margin-bottom: 10px;
}
</style>
